<template>
  <div class="container">
    <h3>基本信息</h3>
    <template v-if="type === 'v' || type === 'a'">
      <div class="poster">
        <img :src="filePath + posterPath" class="posterImage"/>
        <div v-if="isEdit" class="posterButtons">
          <div class="posterButton" @click="reuploadPoster">上传封面</div>
          <div class="posterButton" @click="cutPicture" v-if="type === 'v'">截取当前帧画面</div>
        </div>
      </div>
    </template>
    <div v-if="isEdit" style="width: 95%;margin-bottom: 10px;font-size: 14px;display:flex;align-items: center;">
      <span style="width: 80px;">资源名称：</span>
      <el-input v-model="editName" style="flex: 1" maxlength="30" minlength="1"></el-input>
      <el-button type="primary" plain style="width: 60px;margin-left: 5px;" @click="mediaRename">保存</el-button>
    </div>
    <el-descriptions :column="1" size="medium" :colon="false">
      <el-descriptions-item label="资源名称：" v-if="!isEdit">{{
        data.mediaName
      }}</el-descriptions-item>
      <el-descriptions-item label="上传者：">{{
        data.createByName
      }}</el-descriptions-item>
      <el-descriptions-item label="上传日期：">{{
        data.createTime
      }}</el-descriptions-item>
      <el-descriptions-item label="格式：">{{
        data.fileType
      }}</el-descriptions-item>
      <el-descriptions-item label="资源大小：">{{
        data.fileSize | sizeFilter
      }}</el-descriptions-item>
      <!-- <el-descriptions-item label="简介">{{
        data.mediaDes
      }}</el-descriptions-item> -->
    </el-descriptions>
    <template v-if="type === 'v'">
      <h3>视频信息</h3>
      <el-descriptions :column="1" size="medium" :colon="false">
        <el-descriptions-item label="编码标准：">{{
          data.vidEnc
        }}</el-descriptions-item>
        <el-descriptions-item label="时长：">{{
          data.audDuration
        }}</el-descriptions-item>
        <el-descriptions-item label="码率：">{{
          data.vidRate
        }}</el-descriptions-item>
        <el-descriptions-item label="分辨率：">{{
          data.vidSize
        }}</el-descriptions-item>
        <el-descriptions-item label="帧率：">
          {{ data.vidFrame }}
        </el-descriptions-item>
      </el-descriptions>
    </template>
    <template v-if="type === 'v' || type === 'a'">
      <h3>音频信息</h3>
      <el-descriptions :column="1" size="medium" :colon="false">
        <el-descriptions-item label="编解码器：">{{
          data.audEnc
        }}</el-descriptions-item>
        <el-descriptions-item label="时长：">{{
          data.audDuration
        }}</el-descriptions-item>
        <el-descriptions-item label="码率：">{{
          data.audBitRate
        }}</el-descriptions-item>
        <el-descriptions-item label="声道数：">{{
          data.audChannels
        }}</el-descriptions-item>
        <el-descriptions-item label="采样率：">{{
          data.audRate
        }}</el-descriptions-item>
      </el-descriptions>
    </template>
    <template v-if="type === 'p'">
      <h3>图片信息</h3>
      <el-descriptions :column="1" size="medium" :colon="false">
        <el-descriptions-item label="颜色模式：">{{
          data.picColor
        }}</el-descriptions-item>
        <el-descriptions-item label="尺寸像素：">{{
          data.picSize
        }}</el-descriptions-item>
      </el-descriptions>
    </template>
    <template v-if="type === 'd'">
      <h3>文档信息</h3>
      <el-descriptions :column="1" size="medium" :colon="false">
        <el-descriptions-item label="字数：">{{
          data.docWord
        }}</el-descriptions-item>
        <el-descriptions-item label="文档页数：">{{
          data.docPageNum
        }}</el-descriptions-item>
      </el-descriptions>
    </template>
    <poster-upload
      ref="posterUpload"
      @data-change="resetPoster"
    ></poster-upload>
  </div>
</template>
<script>
import { rename as localRename, edit as localEdit } from '@/api/serve/media-local';
import { rename as teamRename, edit as teamEdit } from '@/api/serve/media-team';
import { rename as flowRename, edit as flowEdit } from '@/api/serve/media-flow';
import { shot } from '@/api/serve/media-file';
import PosterUpload from '@/views/material-library/personal/components/PosterUpload.vue';
export default {
  name: 'descriptions',
  components: { PosterUpload },
  props: {
    data: {
      type: Object,
      default: () => {},
      required: false,
    },
    type: {
      type: String,
      default: 'v'
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
    entry: {
      type: String,
      default: 'local'
    }
  },
  data() {
    return {
      filePath: filePath,
      posterPath: this.data.posterPath,
      editName: this.data.mediaName
    };
  },
  watch: {
    'data.posterPath': {
      handler() {
        this.posterPath = this.data.posterPath;
      }
    }
  },
  methods: {
    async mediaRename() {
      if(!this.editName) {
        this.$message.error('名称不能为空！');
        return;
      }
      if(this.entry == 'local') {
        await localRename(this.data.mediaId, { mediaName: this.editName});
      }
      if(this.entry == 'team') {
        await teamRename(this.data.mediaId, { mediaName: this.editName});
      }
      if(this.entry == 'check') {
        await flowRename(this.data.mediaId, { mediaName: this.editName});
      }
      this.$emit('rename', this.editName);
      this.$message.success('保存成功');
    },
    reuploadPoster() {
      this.$refs.posterUpload.show('add', this.data.mediaId);
    },
    async resetPoster(file) {
      if (file) {
        if(this.entry == 'local') {
          await localEdit(this.data.mediaId, { posterId: file.response.id });
        }
        if(this.entry == 'team') {
          await teamEdit(this.data.mediaId, { posterId: file.response.id });
        }
        if(this.entry == 'check') {
          await flowEdit(this.data.mediaId, { posterId: file.response.id });
        }
        this.posterPath = file.response.fileUrl;
        this.$message.success('上传成功');
      }
    },
    //截取当前帧的图片
    async cutPicture() {
      let video = document.querySelector('video');
      let res = await shot(this.data.fileId, video.currentTime.toString());
      if(this.entry == 'local') {
        await localEdit(this.data.mediaId, { posterId: res.id });
      }
      if(this.entry == 'team') {
        await teamEdit(this.data.mediaId, { posterId: res.id });
      }
      if(this.entry == 'check') {
        await flowEdit(this.data.mediaId, { posterId: res.id });
      }
      this.posterPath = res.fileUrl;
      this.$message.success('上传成功');
    },
  }
};
</script>
<style lang="scss" scoped>
.poster {
  position: relative;
  height: 120px;
  width: 240px;
  margin-bottom: 10px;

  .posterImage {
    height: 120px;
    width: 240px;
    object-fit: contain;
    background-color: black;
  }

  .posterButtons {
    position: absolute;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    color: white;
    width: 100%;
    height: 26px;
    line-height: 26px;
    display: flex;
    justify-content: space-evenly;
    font-size: 13px;

    .posterButton {
      width: 45%;
      cursor: pointer;
      text-align: center;
    }
  }
}
</style>
